<template>
    <div class="markdown-editor-box">
        <el-card class="box-card" id="header_info">
            <div class="clearfix">
                <h1>{{ title }}</h1>
                <br>
                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                <el-tag type="success" size="medium" class="tags_">{{ a_type }}</el-tag>
                <el-tag
                    :key="tag"
                    v-for="tag in JSON.parse(tags)"
                    :disable-transitions="false"
                    @close="handleClose(tag)" size="medium" class="tags_">
                    {{tag}}
                </el-tag>
                <el-tag type="info" size="medium" style="float: right; padding: 3px 0; margin-left: 5px;">&nbsp;&nbsp;最后编辑时间： {{ editor_time }}&nbsp;&nbsp;</el-tag>
                <el-tag type="success" size="medium" style="float: right; padding: 3px 0">&nbsp;&nbsp;作者： {{ editor_name }}&nbsp;&nbsp;</el-tag>
                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->

            </div>
            <!-- <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
            </div> -->
        </el-card>
        <el-backtop :bottom="60" target=".markdown-editor-box #markdown-view" :visibility-height=400></el-backtop>
        <!-- <link rel="stylesheet" :href="'/static/editor.md/css/google_code_prettify_themes/' + codeTheme"> -->
        <div :id="viewId">
            <textarea style="display: none;" v-model="doc.content"></textarea>
        </div>
    </div>
</template>

<script>
    import $ from "jquery";
    import scriptjs from 'scriptjs';
    import { defaultConfig_show } from '../../public/lib/editor.md';
    import _global from './Global.vue'
    export default {
        props: {
            viewId: {
                'type': String,
                'default': 'markdown-view'
            },
            config: { // 编辑器配置
                type: Object
            },
            initData: {
                'type': String
            },
            initDataDelay: {
                'type': Number, // 延迟初始化数据时间，单位毫秒
                'default': 0
            }
        },
        data: function() {
            return {
                doc: {},
                editor: null,
                tags: '["a", "b"]',
                a_type: "python",
                title: '',
                editor_name: "",
                editor_time: "",
            }
        },
        methods: {
            fetchScript: function(url) {
                return new Promise((resolve) => {
                    scriptjs(url, () => {
                        resolve();
                    });
                });
            },
            getDoc: function () {
                return this.doc
            },
            getConfig: function () {
                return { ...defaultConfig_show, ...this.config }
            },
            forceUpdate: function () {
                this.$forceUpdate()
            },
            initView: function () {
                (async () => {
                    await this.fetchScript('/lib/editor.md/jquery.js');
                    await this.fetchScript('/lib/editor.md/lib/marked.min.js')
                    await this.fetchScript('/lib/editor.md/lib/prettify.min.js')
                    await this.fetchScript('/lib/editor.md/lib/raphael.min.js')
                    await this.fetchScript('/lib/editor.md/lib/underscore.min.js')
                    await this.fetchScript('/lib/editor.md/lib/sequence-diagram.min.js')
                    await this.fetchScript('/lib/editor.md/lib/flowchart.min.js')
                    await this.fetchScript('/lib/editor.md/lib/jquery.flowchart.min.js')
                    await this.fetchScript('/lib/editor.md/editormd.min.js')
                    // await this.fetchScript('/static/editor.md/editormd.js');
                    $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', '/lib/editor.md/css/editormd.min.css') );
                    $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', '/lib/editor.md/examples/css/style.css') );
                    $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', '/lib/editor.md/css/editormd.preview.min.css') );
                    this.$nextTick(() => {
                        this.editor = window.editormd.markdownToHTML(this.viewId, this.getConfig())
                    });
                })();
            },
            setDoc (doc) {
                if (doc) {
                    let vm = this
                    vm.doc = doc
                    let markdownViewDiv = document.getElementById('markdown-view')
                    if (markdownViewDiv) {
                        markdownViewDiv.innerHTML = '<textarea style="display: none;"></textarea>'
                        vm.initView()
                        if (doc.content) {
                        markdownViewDiv.getElementsByTagName('textarea')[0].innerHTML = doc.content
                        }
                    }
                }
            },
            showContent (id) {
                let vm = this
                // vm.$store.state.editor.isEditing = false
                var token = localStorage.getItem('token')
                fetch(`http://${_global.request_host}:${_global.reuqest_port}/article/detail?aid=` + id, {
                    method:'GET',
                    mode: 'cors',
                    headers:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'token': token
                    },
                })
                .then(resp => resp.json())
                .then(json => {
                    if (json.code == 200) { // 上传成功
                        this.title = json.results.title
                        this.editor_name = json.results.name
                        this.editor_time = json.results.editor_time
                        let doc = {"content": json.results.message}
                        if (doc) {
                            vm.doc = doc
                            let markdownViewDiv = document.getElementById('markdown-view')
                            if (markdownViewDiv) {
                                markdownViewDiv.innerHTML = '<textarea style="display: none;"></textarea>'
                                vm.initView()
                                if (doc.content) {
                                    markdownViewDiv.getElementsByTagName('textarea')[0].innerHTML = doc.content
                                }
                            }
                        }
                    }else {
                        this.$router.push('/404')
                    }
                })
            }
        },
        mounted: function() {
            let vm = this
            let docId = localStorage.getItem('watch_id')
            if (docId === null || docId === 'null' || docId === ""){
                this.$router.push('/404')
                return
            }
            vm.showContent(docId)
        }
    }
</script>

<style scoped>
.markdown-editor-box {
    text-align: center;
    min-width: 800px;
}

#markdown-view {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.tags_ {
    float: left; 
    margin-right:5px;
    margin-bottom: 10px;
}

#header_info {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}
</style>